import {Component, EventEmitter, HostListener, Input, OnChanges, Output} from '@angular/core';
import {HttpService} from '@kylin/http';
import {NzMessageService} from 'ng-zorro-antd';
import {Status} from './interface';
import {RequestInfo} from '../index';
import {ActivatedRoute} from '@angular/router';


declare const $: any;

@Component({
    selector: 'kylin-status-selector',
    templateUrl: './status-selector.component.html',
    styleUrls: [
        'status-selector.component.less'
    ],
    // encapsulation: ViewEncapsulation.None
})
export class StatusSelectorComponent implements OnChanges {
    @Input() statusList = new Array<Status>();
    @Input() selectIdx = 0;
    @Input() queryInfo: RequestInfo;
    selectorData: any;
    @Output() selectedIdxChange = new EventEmitter<any>();

    constructor(private message: NzMessageService, private http: HttpService, private router: ActivatedRoute) {
    }

    ngOnChanges(changes) {
        if (changes.selectIdx) {
            this.getTotalByStatus();
            if (changes.selectIdx.previousValue) {
                setTimeout(() => {
                    this.changeIndex(changes.selectIdx.currentValue);
                }, 0)
            }
        }
    }

    getTotalByStatus = () => {
        const statusTotal: any = [];
        if (this.statusList.length) {
            if (!(this.queryInfo && this.queryInfo.path)) {
                this.selectorData = this.statusList.map(item => {
                    return {
                        status: item.label,
                        total: 0
                    }
                });
                return;
            }
            const reqSet = Promise.all(
                this.statusList.map(item =>
                    this.http.get(this.queryInfo.path, {
                        ...(this.queryInfo.params),
                        status: item.key
                    })
                )
            );
            reqSet.then(rst => {
                rst.map((rep, index) => {
                    statusTotal.push({
                        status: this.statusList[index].label,
                        total: (rep as any).status === 200 ? (rep as any).result.total : 0
                    });
                    this.selectorData = statusTotal;
                    setTimeout(this.setStyle, 0);
                });
            });
        } else {
            this.selectorData = statusTotal;
        }
    }

    changeIndex(idx) {
        const item = this.statusList[idx];
        this.selectIdx = idx;
        this.selectedIdxChange.emit({
            status: item.key,
            index: idx
        });
    }

    @HostListener('window:resize') setStyle() {
        if ($('.status-selector-wrapper').height() > 50) {
            $('.status-selector-wrapper>.selector-item:last-child').css('margin-top', '16px');
        } else {
            $('.status-selector-wrapper>.selector-item:last-child').css('margin-top', '0');
        }
    }

    getCurrentStatus = () => {
        return {status: this.statusList[this.selectIdx]['key']};
    }

    toggleBgColor(event) {
        if (!$(event.currentTarget).hasClass('active')) {
            $(event.currentTarget).toggleClass('skin-bgc');
        }
    }
}
